<template>
  <div class="orderListRuleForm">
    <panle title='提现记录' content="提现记录"></panle>

    <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">

      <el-form-item label="创建时间" prop="add_time">
        <el-date-picker
            v-model="form.add_time"
            type="daterange"
            align="right"
            size="mini"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>

<!--      <el-form-item label="日期" prop="apply_for_time">-->
<!--        <el-date-picker-->
<!--            v-model="form.apply_for_time"-->
<!--            type="date"-->
<!--            placeholder="选择日期"-->
<!--            format="yyyy-MM-dd"-->
<!--            value-format="yyyy-MM-dd">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->

      <el-form-item label="体现状态" prop="status">
        <el-select size="mini" v-model="form.status" placeholder="请选择">
          <el-option v-for="item in populevel" :key="item.value" :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="提现人">
        <el-input size="mini" placeholder="请输入提现人名称" v-model="form.popu_name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" size="mini">搜索</el-button>
        <el-button @click="resetForm('form')" size="mini">重置</el-button>
        <el-button size="mini" @click="init()">刷新</el-button>
        <!--                <vue-json-excel-->
        <!--                    style="display: inline;margin-left: 10px;"-->
        <!--                    :data="tableData"-->
        <!--                    :fields="excelFields"-->
        <!--                    name="导出流失提醒.xlsx"-->
        <!--                    type="xlsx">-->
        <!--                    <el-button size="mini">导出</el-button>-->
        <!--                </vue-json-excel>-->

      </el-form-item>
    </el-form>

    <div class="table-wrap">
      <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                stripe default-expand-all>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="popu_name" label="提现人"></el-table-column>
        <el-table-column prop="money" label="提现金额"></el-table-column>
        <el-table-column prop="apply_for_time" label="提现时间"></el-table-column>
        <el-table-column prop="stype" label="提现状态"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]"
                       :page-size="form.pageSize"
                       background layout="total, sizes, prev, pager, next, jumper"
                       :total="form.total"></el-pagination>
      </div>
    </div>

  </div>

</template>

<script>
import {
  getUserPayList,
  refuseApply
} from "@/api/sell/userPay/userPay";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';
import VueJsonExcel from 'vue-json-excel';
import {editClient} from "@/api/scrm/client/clientList";
import {delQwTag} from "@/api/scrm/tag/tag";
import {dateFormat} from "@/utils";

export default {
  components: {
    Panle,
    PersButton,
    VueJsonExcel
  },
  data() {
    return {
      loading: false,
      options: [],
      value: '',
      open: false,
      tableData: [],
      number: 0,
      status: 0,

      form: {
        add_time: '',
        apply_for_time: '',
        status: '',
        popu_name: '',
        pageSize: 10,
        pageNumber: 1,
        total: 0,
      },
      populevel: [{
        value: 1,
        label: '申请中'
      }, {
        value: 2,
        label: '已通过'
      }, {
        value: 3,
        label: '已拒绝'
      }],
      optionsVa: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const current = new Date();
              const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
              const start = new Date();
              const end = new Date();
              start.setTime(new Date(month).getTime());
              end.setTime(new Date(month + ' 23:59:59').getTime());
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const current = new Date();
              const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
              const start = new Date();
              const end = new Date();
              start.setTime(new Date(month).getTime());
              end.setTime(new Date(month + ' 23:59:59').getTime());
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '上一周',
            onClick(picker) {
              const current = new Date();
              const start_day = current.getDate() - current.getDay() - 6;
              const end_day = current.getDate() - current.getDay();
              const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
              const start = new Date();
              const end = new Date();
              start.setTime(new Date(month + start_day).getTime());
              end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      excelFields: {
        "客户 ": "client_name",
        "添加员工": "staff_name",
        "企业标签": "tag_name",
        "流失时间": "lapsed_time",
        "添加时间": "add_time",
        "添加员工时长（天）": "day_time",

      }
    }
  },
  created() {
    sessionStorage.removeItem('live-stat')
    this.dateFormat();
    this.init(true);
  },
  methods: {
    hasPermission,
    isShow,
    init() {
      this.loading = true;
      getUserPayList(this.form).then((res) => {
        this.tableData = res.data.list;
        this.form.total = res.data.total;
        this.loading = false;
      })
    },

    search: function () {
      // this.loading = true;
      this.form.pageSize = 10;
      this.form.pageNumber = 1;
      this.init();
    },
    handleSizeChange: function (e) {
      this.form.pageSize = e;
      this.init();
    },
    handleCurrentChange: function (e) {
      this.form.pageNumber = e;
      this.init();
    },
    resetForm(formName) {
      this.dateFormat();
      this.form.status = ''
      this.form.apply_for_time = ''
      this.form.popu_name = ''
      this.init();
    },

    refusegroup: function (data) {
      this.$prompt('本次提现金额:'+ data.money +'元', '确定拒绝推广员【' +data.popu_name+ '】提现申请？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(({ value }) => {
        let _param = {
          'id': data.id,
          'remark': value
        }
        refuseApply(_param).then((res) => {
          if (res.code == 200) {
            this.msgSuccess(res.msg);
            this.init();
          } else {
            this.msgError(res.msg);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消审批'
        });
      });
    },
    dateFormat() {
      const year = new Date().getFullYear();
      const month = new Date().getMonth(); // 注意：月份是从0开始的

      // 月初
      let start = new Date(year, month, 1);

      // 月末
      let end = new Date(year, month + 1, 0);
      this.form.add_time = [dateFormat(start, 'yyyy-MM-dd') + ' 00:00:00', dateFormat(end, 'yyyy-MM-dd') + ' 23:59:59']
    },
  }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
  margin: 20px;

  .el-form-item {
    margin-bottom: 0;
  }
}

.el-form--inline .el-form-item {
  display: inline-block;
  vertical-align: top;
}

.orderListRuleForm .el-form-item {
  margin-bottom: 0;
}

.search-content {
  width: 100%;
  margin: 20px;
}


</style>